ガントビューによるグループ化方式を使用すると、階層関係を視覚的に表示できます。ガントビューでは、開始日と終了日を分かりやすく表示できます。これにより、日単位、週単位、月単位、または年単位で、タスクと成果物をタイムスケールに基づいて管理できます。
ガントビューによるグループ化方式を実装するには、次の手順を実行します。
サンプルコード
- DataView参照の後に、次の参照を追加します。
<link rel="stylesheet" href="[Your Script Path]/gc.spread.views.gantt.10.0.0.css"> <script src="[Your Script Path]/gc.spread.views.gantt.10.0.0.min.js" type="text/javascript"></script> <script src="data/ganttEvent.js" type="text/javascript"></script>
- bodyタグ内にdivタグを追加して、ページ内のコンテナとしてDOM要素を含めます。
<div id="grid1" style="height:100%"></div><template id="popupTemplate" style="display: none"> <div class="dialog-body"> <div> <div class="dialog-ids"> <div class="dialog-header">start date:</div> <input type="date" class="dialog-content" data-column="start" /> </div> <div class="dialog-ids" style="margin-left:40px"> <div class="dialog-header">end date:</div> <input type="date" class="dialog-content" data-column="end" /> </div> </div> <div class="dialog-header">description:</div> <textarea class="dialog-text" style="height:60px;font-style:italic;" data-column="description"></textarea> <div class="dialog-header">resources:</div> <textarea class="dialog-text" style="height:28px;" data-column="resources"></textarea> </div> </template>
- 列の定義を追加します。
var columns = [{ id: 'id', caption: 'Id', dataField: 'id', width: 80 }, { id: 'start', caption: 'Start', dataField: 'start', width: 100, dataType: 'date', format: 'mmm dd,yyyy' }, { id: 'end', caption: 'End', dataField: 'end', width: 100, dataType: 'date', format: 'mmm dd,yyyy' }, { id: 'gantt', ganttColumn: { timeLineScale: 'month', scale: 300, start: 'start', end: 'end', text: 'description' }, width: '*' }, { id: 'description', caption: 'Description', dataField: 'description', visible: false }, { id: 'resources', caption: 'Resources', dataField: 'resources', visible: false }, { id: 'predecessorID', caption: 'predecessorID', dataField: 'predecessorID', visible: false, allowEditing: false }, { id: 'parentID', caption: 'parentID', dataField: 'parentID', visible: false, allowEditing: false }];
- DIVタグのグリッドIDを呼び出し、コードを初期化します。
var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({ colHeaderHeight: 48, rowHeight: 48, allowEditing: true, editRowTemplate: '#popupTemplate', editMode: 'popup', hierarchy: { keyField: 'id', parentField: 'parentID', collapsed: false, column: 'id', footer: { visible: false } } }));